<template>
    <div>
        <div id="myChart" style="width:1000px; height:220px ; background-color: #fff;"></div>
    </div>
</template>

<script>
export default {
    name: 'chart',
    data() {
        return {
            chart: null,
            options: {},

        }
    },
    mounted() {
        this.initOptions()
        this.initCharts()
    },
    methods: {
        initOptions() {
            this.options = {
                legend: {
                    orient: "horizontal",//水平展示，不写默认水平展示
                    center: 20,
                    bottom: 20,
                    data: ['入流量', '出流量'],
                    icon: 'square',
                    itemGap: 100
                },
                xAxis: {
                    data: [
                      '2020.01.16',
                        '2020.01.17',
                        '2020.01.18',
                        '2020.01.19',
                        '2020.01.20',
                        '2020.01.21',
                        '2020.01.22',
                    ],
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {},
                series: [
                    {
                        data: [
                            4576.12,
                            3245.98,
                            4878.99,
                            2563.67,
                            1789.34,
                            2467.98,
                            1213.09,
                        ],
                        type: 'line',
                        smooth: true,
                        color: ['#0a7bdf'],
                        name: '入流量',
                        symbol: 'none'
                    },
                    {
                        data: [3978.09,
                            6545.65,
                            3976.02,
                            5981.88,
                            6536.99,
                            2121.32,
                            1363.29
                        ],
                        type: 'line',
                        smooth: true,
                        name: '出流量',
                        symbol: 'none',
                        color: ['#28abef'],

                    },

                ]
            }
        },
        initCharts() {
            this.chart = this.$echarts.init(document.getElementById('myChart'))
            this.chart.setOption(this.options);
           
        },
    }
}
</script>

<!-- <style scoped>
#myChart {
    width: 400px;
    height: 400px;
}
</style> -->
<style>
#myChart,
html,
body {
    width: 100%;
}
</style>